<template>
  <div class="radio">
    <!-- 电台分类 -->
    <ul>
      <li v-for="(v, i) in SortList" :key="i">
        <router-link :to="`/Radio/${v.id}`" :class="{ show: v.id == showID }">
          <span :style="{ backgroundImage: 'url(' + v.picWebUrl + ')' }"></span>
          <span>{{ v.name }}</span>
        </router-link>
      </li>
    </ul>
    <!--  -->
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 电台分类数据
      SortList: {},
      // 显示的分类
      showID:"",
    };
  },
  //
  methods: {
    // 获取电台分类数据
    getRadioSortData() {
      axios.get(`http://127.0.0.1:3000/dj/catelist`).then((res) => {
        this.SortList = res.data.categories;
      });
    },
  },
  //
  created() {
    this.getRadioSortData();
    this.showID=this.$route.params.id
  },
};
</script>

<style scoped>
.radio {
  width: 980px;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
}
.radio > ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.radio > ul > li {
  margin-left: 33.75px;
  margin-bottom: 25px;
}
.radio > ul > li:nth-child(1) {
  margin-left: 0px;
}
.radio > ul > li:nth-child(9n + 1) {
  margin-left: 0px;
}
.radio > ul > li > a {
  display: block;
  width: 70px;
  height: 70px;
  border: 2px solid transparent;
  border-radius: 5px;
}
.radio > ul > li > a:hover {
  background-color: #f6f7f7;
}
.radio > ul > li > a > span:nth-child(1) {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto;
}
.radio > ul > li > a > span:nth-child(2) {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #888888;
}
.radio > ul > li > .show {
  border: 2px solid #db5e5e;
  
}
.radio > ul > li > .show > span:nth-child(1) {
  background-position: -48px 0px ;
}
.radio > ul > li > .show > span:nth-child(2) {
  color: #db5e5e;
}
</style>